<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
	font-family:"Arial","微軟正黑體";
}

.academiccard {
	width: 580px;
	background-color: #4381C1;
	border-radius: 5%;
	box-shadow: 4px 4px 12px 4px rgba(20%, 20%, 40%, 0.3);
	width: 580px;
}

.academicicondiv {
	width: 100%;
	height: 10%;
}

.academicicondiv img {
	max-width: 100%;
	margin-bottom: 20px;
}

.card_container {
	text-align: left;
	margin-top: 4%;
	padding: 0 5%;
}

.card_span {
	margin: 3% 0 3% 0;
}

.card_spantitle {
	padding-top: 5%;
}

.card_spanchg {
	margin-left: 60%;
}
</style>
</head>
<body>
	<div class="academiccard grid_6 grid_6_chg">
		<div class="card_container">
			<h3 class="card_span card_spantitle">
				<span class="">TO: example_receiver</span>
			</h3>
			<p id="preview_text">
			<h4>example_text</h4>
			</p>
			<h3 class="card_span card_spanchg">
				<span class="">From: example_sender</span>
			</h3>
		</div>
		<div class="academicicondiv">
			<img src="http://imgh.us/tube.svg" alt="">
		</div>
	</div>
</body>
</html>